<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=">
<title>平台公告</title>
</head>
<style>
*{
	margin:0;
	padding:0;
}
.title{
	width: 100%;	
	height:35px;
	line-height:35px;
	background-color:#d73021;
	color:#fff;
    text-align: center;
	position: fixed;
	z-index: 990;
}
.title_nr{
	width: 100%;	
	height:34px;
	line-height:34px;
	font-size:17px;
	color:#fff;
    text-align: center;
    z-index: 100;
}
.content{
	width: 100%;
    position: absolute;
    top: 35px;
    height:280px;
}

.off{
	color:#fff;
	font-size: 25px;
	top:0;
	right:10px;
	position:absolute;
	z-index: 101;
}


.left{
	width:20%;
	height:405px;
    float: left;
    overflow-y: auto;
	border-right: 1px solid #f1efef;
}
.left ul li{
	height:32px;
	line-height:40px;
	border-bottom: 1px solid #f1efef;
	cursor:pointer;
	padding-bottom:5px;
	list-style: none;
}
.left ul li span{
	text-decoration:none;
	padding-left:5px;
	color:#000;
	font-size:15px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*.left ul li i{
	margin-top:11px;
	width:17px;
	height:16px;
	display:block;
	float:left;
	margin-left:10px;
	background:url(/static/template/sysme/images/nti_nav_icon.png);
	background-repeat: no-repeat;
}*/
.left ul li i{
	margin-top:17px;
	width:8px;
	height:8px;
	display:block;
	margin-left:10px;
	border-radius: 50%;
	float:left;margin-right:6px;
	background:#d73021;
}
.right{
	width:78%;
	height:415px;
	margin-left:5px;
	float:left;
	display:none;
	color:#666;
}
.right-title{
	margin-left:5px;
	height:40px;
	line-height:40px;
    color: red;
    text-align: center;
    font-size: 15px;
    margin-top:14px;
	border-bottom: 1px solid #f1efef;
}
.cur{
	background:#f3f1f1;
}
.right-content{
	margin-left: 15px;
    font-size:14px;
	height:300px;
	overflow-y: auto;
	text-indent: 24px;
}


.right-content p{
  text-indent: 24px;
  line-height:15px;
  text-align: left !important;
  line-height: 24px;
  padding: 10px;
  color: #666;
  font-size: 13px;
  width:90%;
}
.right-content p img{display: block;
    width: 100%;
    margin: 0 auto;
}
.ztys{
	color: #FF0000;
}
.left>ul>li>span:hover{
	color: #FF0000;
}
.footer{width:100%;position:fixed;bottom:0;}
.footer div{width:100px;height:30px;line-height:30px;background:red;color:#fff;font-size:16px;text-align: center;border-radius: 4px;margin:0px auto 15px;}
</style>
<body>

<div class="title">平台公告<span class="off">×</span></div>
<div class="content">
	<div class="left">
		<ul>
		{volist name="list" id="vo" key="key"}
			<li class="list_title {if($key==1)}cur{/if}"><i></i><span data-value="{$vo.id}">{$vo.title}</span></li>
		{/volist}
		</ul>
	</div>
	{volist name="list" id="vo" key="key"}
	<div class="right content_{$vo.id}"   {if($key==1)}style="display:block;" {/if}data-value="{$vo.id}">
		<div class="right-title"><b>{$vo.title}</b></div>
		<div class="right-content">{$vo.ggtext}</div>
	</div>
	{/volist}
</div>
<div class="footer">
    <div id="know">知道了</div>
</div>
</body>
<script type="text/javascript" src="__TEMPLATE__/sysme/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	$(".off").click(function(){
		var index = parent.layer.getFrameIndex(window.name); 
		parent.layer.close(index);
	})
	$("#know").click(function(){
		var index = parent.layer.getFrameIndex(window.name); 
		parent.layer.close(index);
	})
	
	$(".left .list_title").click(function(){
		var list_id = $(this).find('span').data('value');
		$(".right").css("display","none");
		$(".left .list_title").removeClass('cur');
		$(this).addClass('cur');
		
		$(".content_"+list_id).css('display','block');
	})
	
	$(".left").children('ul').children('li').click(function(){
		$(this).children('span').css('color','#FF0000');
		$(this).siblings('li').children('span').css('color','#888');
	})
    
    
    
</script>
</html>